<template>
  <el-container class="message-page">
    <el-header class="message-header">
      <h1>消息</h1>
    </el-header>

    <el-main class="message-list">
      <el-list>
        <el-list-item v-for="(message, index) in messages" :key="index" @click="openChat(message)">
          <div class="message-preview">
            <img :src="message.avatar" alt="头像" class="avatar" />
            <div class="message-info">
              <strong>{{ message.sender }}</strong>
              <p>{{ message.content }}</p>
              <small>{{ formatDate(message.timestamp) }}</small>
            </div>
          </div>
        </el-list-item>
      </el-list>
    </el-main>

    <el-dialog v-if="showChat" :visible.sync="showChat" @close="closeChat">
      <template #title>
        <span>{{ currentChat.sender }}</span>
        <el-button class="close-btn" @click="closeChat" icon="el-icon-close" circle></el-button>
      </template>

      <div class="chat-content" ref="chatContent">
        <div v-for="(msg, idx) in currentChat.messages" :key="idx" class="chat-message">
          <img :src="msg.avatar" alt="头像" class="avatar" />
          <strong>{{ msg.sender }}:</strong>
          <p>{{ msg.content }}</p>
        </div>
      </div>

      <el-input v-model="newMessage" placeholder="输入消息..." @keyup.enter.native="sendMessage">
        <template #append>
          <el-button @click="sendMessage" type="primary">发送</el-button>
        </template>
      </el-input>
    </el-dialog>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      messages: [
        { sender: 'KKoma', content: '搞快来开一把', timestamp: new Date(), avatar: require('../assets/kkoma.jpg') },
        { sender: '宇宙机器人', content: '我就是年度最佳，咋得不服？你只能看着我索✌领奖！', timestamp: new Date(), avatar: require('../assets/jiqi.jpg') },
        { sender: '糖', content: '我终于上白银了！', timestamp: new Date(), avatar: require('../assets/tang.jpg') },
        { sender: '罗', content: '来玩吃鸡！我刚刚得吃了', timestamp: new Date(), avatar: require('../assets/luo.jpg') },
        { sender: '刘', content: '你是我爹！', timestamp: new Date(), avatar: require('../assets/liu.jpg') },
        { sender: '曹', content: '熬夜没头发', timestamp: new Date(), avatar: require('../assets/cao.jpg') },
      ],
      showChat: false,
      currentChat: null,
      newMessage: '',
    };
  },
  methods: {
    openChat(message) {
      this.currentChat = {
        sender: message.sender,
        messages: [
          { 
            sender: message.sender, 
            content: message.content, 
            avatar: message.avatar,
            timestamp: message.timestamp 
          },
        ],
      };
      this.showChat = true;
    },
    closeChat() {
      this.showChat = false;
      this.currentChat = null;
      this.newMessage = '';
    },
    sendMessage() {
      if (this.newMessage.trim()) {
        this.currentChat.messages.push({ 
          sender: '延 丰', 
          content: this.newMessage, 
          avatar: require('../assets/touxiang.jpg'),
          timestamp: new Date() 
        });
        this.newMessage = '';
      }
    },
    formatDate(timestamp) {
      const options = { 
        year: 'numeric', 
        month: 'long', 
        day: 'numeric', 
        hour: 'numeric', 
        minute: 'numeric', 
        hour12: false 
      };
      return new Date(timestamp).toLocaleDateString('zh-CN', options) + ' ' + new Date(timestamp).toLocaleTimeString('zh-CN', { hour: 'numeric', minute: 'numeric' });
    }
  },
};
</script>

<style scoped>
.message-page {
  max-width: 800px;
  margin: auto;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.message-header {
  margin-bottom: 20px;
}

.message-list {
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
}

.message-preview {
  display: flex;
  align-items: center;
}

.avatar {
  width: 40px; 
  height: 40px; 
  border-radius: 50%; 
  margin-right: 10px; 
}

.message-info {
  flex: 1; 
}

.chat-content {
  max-height: 300px;
  overflow-y: auto;
  margin-bottom: 16px;
}

.chat-message {
  display: flex;
  align-items: center; 
  margin: 5px 0;
}

.chat-message .avatar {
  width: 30px; 
  height: 30px; 
  border-radius: 50%; 
  margin-right: 8px; 
}
</style>